बुनियादी HTML उदाहरण
इस अध्याय में हम कुछ बुनियादी HTML उदाहरण दिखाएंगे।
यदि आप ऐसे टैग का उपयोग करते हैं जिन्हें हमने अभी तक नहीं सीखा है तो चिंता न करें।
HTML दस्तावेज़
सभी HTML दस्तावेज़ दस्तावेज़ प्रकार की घोषणा से शुरू होने चाहिए:<!DOCTYPE html>.
HTML दस्तावेज़ ही<html>के साथ शुरू</html>इसी के साथ समाप्त होता है
HTML दस्तावेज़ का दृश्य भाग<body>और</body>के बीच है
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html><!DOCTYPE> घोषणा
<!DOCTYPE>घोषणा दस्तावेज़ प्रकार को इंगित करती है, और ब्राउज़र को वेब पेजों को सही ढंग से प्रदर्शित करने में मदद करती है।
यह पृष्ठ के शीर्ष पर (किसी भी HTML टैग से पहले) दिखाई देना चाहिए, शायद।
<!DOCTYPE>घोषणा केस-संवेदी नहीं है.
HTML5 के लिए<!DOCTYPE>अधिसूचना:
<!DOCTYPE html>सहायता नोट:
हमेशा आपकी HTML फ़ाइलों की पहली पंक्ति के रूप में<!DOCTYPE html>जोड़ें यह ब्राउज़र को बताता है कि यह एक HTML5 दस्तावेज़ है।
HTML हेडर
HTML हेडर<h1>पहला<h6>टैग तक परिभाषित हैं।
<h1>सबसे महत्वपूर्ण विषय को परिभाषित करता है.<h6>कम से कम महत्व के विषय को परिभाषित करता है:
उदाहरण
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3><h1> - मुख्य शीर्षक
पेज का महत्वपूर्ण शीर्षक. एक पृष्ठ में सामान्यतः केवल एक <h1> होना चाहिए।
<h2> - <h6>
उपशीर्षक. <h2> सबसे महत्वपूर्ण है, <h6> सबसे कम महत्वपूर्ण है।
HTML कॉलम
HTML कॉलम<p>टैग द्वारा परिभाषित हैं:
उदाहरण
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>नोट:
पाठ को अनुच्छेदों में विभाजित करें<p>टैग का प्रयोग करें. प्रत्येक नए अनुच्छेद के लिए एक नया<p>टैग करना प्रारंभ करें.
HTML लिंक
HTML लिंक<a>टैग द्वारा परिभाषित हैं:
उदाहरण
<a href="https://www.jassifteam.com">This is a link</a>संबंध में लक्ष्यhrefविशेषता में निर्दिष्ट.
HTML तत्वों के बारे में अतिरिक्त जानकारी प्रदान करने के लिए विशेषताओं का उपयोग किया जाता है।
आप बाद के अध्याय में विशेषताओं के बारे में अधिक जानेंगे।
लिंक टैग
<a href='URL'>लिंक टेक्स्ट</a>
href विशेषता
लिंक में लक्ष्य URL निर्दिष्ट करता है
HTML छवियां
HTML छवियां<img>टैग द्वारा परिभाषित हैं.
स्रोत दस्तावेज (src), रिप्लेसटेक्स्ट (alt), चौड़ाई (width), और ऊंचाई (height) विशेषताओं के रूप में दिए गए हैं:
उदाहरण
<img src="jassifteam.jpg" alt="Jassif Team Logo" width="104" height="142">टिप्पणी:
altजब छवि दिखाई नहीं देती है या जब छवि लोड नहीं होती है तो विशेषता प्रदर्शित होने के लिए प्रतिस्थापन पाठ प्रदान करती है। यह पहुंच के लिए महत्वपूर्ण है.
HTML सोर्स कोड कैसे देखें
क्या आपने कभी किसी वेब पेज को देखा है और सोचा है "अरे! उन्होंने ऐसा कैसे किया?" क्या आपने कभी ऐसा सोचा है?
HTML स्रोत कोड देखें
HTML पृष्ठ पर CTRL + U क्लिक करें या पृष्ठ पर राइट-क्लिक करें और "पृष्ठ स्रोत देखें" चुनें। इससे एक नया टैब खुलेगा जिसमें पृष्ठ का HTML स्रोत कोड होगा।
HTML तत्व की जाँच करें
किसी तत्व पर (या किसी खाली क्षेत्र में) राइट-क्लिक करें, "निरीक्षण करें" चुनें और देखें कि कौन से तत्व बनाए गए हैं (आप HTML और CSS दोनों देखेंगे)। आप एलीमेंट्स या स्टाइल्स पैनल में खुलने वाले HTML या CSS को संपादित कर सकते हैं।
विकास उपकरण:
पृष्ठ पर राइट-क्लिक करें और "निरीक्षण" या F12 कुंजी दबाएँ। इससे ब्राउज़र डेवलपमेंट टूल खुल जाएंगे ताकि आप वास्तविक समय में HTML और CSS को देख और संपादित कर सकें।